<template>
    <el-dialog
        v-model="centerDialogVisible"
        title="添加菜单"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="menuForm" :rules="menuRules" ref="menuFormRef">
                <el-form-item label="菜单名称-英文" label-width="20%" prop="name">
                    <el-input v-model="menuForm.name" placeholder="菜单名称-英文" clearable />
                </el-form-item>
                <el-form-item label="菜单名称-中文" label-width="20%" prop="cnName">
                    <el-input v-model="menuForm.cnName" placeholder="菜单名称-中文" clearable />
                </el-form-item>
                <el-form-item label="菜单图标" label-width="20%" prop="iconType">
                    <el-select v-model="menuForm.iconType" clearable placeholder="选择菜单图标" filterable style="width: 100%">
                        <el-option v-for="item in icons.dataList" :key="item.id" :value="item.componentName" :label="item.componentCnName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="路由Path" label-width="20%" prop="routePath">
                    <el-input v-model="menuForm.routePath" placeholder="路由Path" clearable />
                </el-form-item>
                <el-form-item label="菜单类型" label-width="20%" prop="menuType">
                    <el-radio-group v-model="menuForm.menuType" class="ml-4">
                        <el-radio label="COMMON">静态组件</el-radio>
                        <el-radio label="DYNAMIC">动态路由</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单组件路径" label-width="20%" prop="componentPath" v-if="menuForm.menuType === 'COMMON'">
                    <el-input v-model="menuForm.componentPath" placeholder="菜单组件路径" clearable />
                </el-form-item>
                <el-form-item label="菜单组件" label-width="20%" prop="componentId" v-if="menuForm.menuType === 'DYNAMIC'">
                    <el-select v-model="menuForm.componentId" clearable placeholder="菜单组件" style="width: 100%">
                        <el-option :value="item.id" :label="item.componentCnName" v-for="item in componentList.dataList"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单状态" label-width="20%">
                    <el-select v-model="menuForm.status" clearable placeholder="选择菜单状态" style="width: 100%">
                        <el-option value="NORMAL" label="正常"></el-option>
                        <el-option value="DISABLE" label="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="挂载文根" label-width="20%" prop="routeRootId">
                    <el-select v-model="menuForm.routeRootId" clearable placeholder="挂载文根" style="width: 100%">
                        <el-option :value="item.id" :label="item.routeRootName" v-for="item in routeRootPath.dataList"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="父菜单" label-width="20%" prop="parentId">
                    <el-select v-model="menuForm.parentId" clearable placeholder="选择父菜单" filterable style="width: 100%" >
                        <el-option v-for="item in parentMenus" :key="item.id" :value="item.id" :label="item.cnName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="扩展数据" label-width="20%" prop="meta">
                    <el-input v-model="menuForm.meta" clearable type="textarea" placeholder="扩展数据" style="width: 100%"/>
                </el-form-item>
                <el-form-item label="排序优先级" label-width="20%" prop="orderNum">
                    <el-input-number v-model="menuForm.orderNum" min="0" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="commitLoading" @click="submitDialog()">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import {addMenuInfo, menuInfoQuery, updateMenuInfo} from '@/request/menu'
import {ElNotification} from "element-plus";
import {componentInfoQueryNoContent} from "@/request/components";
import {routeRootPathInfoQuery} from "@/request/routeRootPath";

export default {
    name: "AddMenuDialog",
    props: ['menuForm'],
    data() {
        return {
            menuRules: {
                name: [{ required: true, message: '英文名称不能为空', trigger: 'blur' }],
                cnName: [{ required: true, message: '中文名称不能为空', trigger: 'blur' }],
                iconType: [{ required: true, message: '图标不能为空', trigger: 'blur' }],
                routePath: [{ required: true, message: '路由Path不能为空', trigger: 'blur' }],
                routeRootId: [{ required: true, message: '路由文根不能为空', trigger: 'blur' }],
                parentId: [{ required: true, message: '父菜单不能为空', trigger: 'blur' }],
                meta: [{ required: true, message: '父菜单不能为空', trigger: 'blur' }]
            },
            componentList: [],
            routeRootPath: [],
            commitLoading: false
        }
    },
    computed: {
        centerDialogVisible() {
            return this.$store.state.centerDialogVisible;
        },
        parentMenus() {
            return this.$store.state.parentMenus;
        },
        icons() {
            return this.$store.state.icons;
        }
    },
    methods: {
        cancelDialog() {
            this.$store.commit('closeCenterDialogVisible');
        },
        submitDialog() {
            this.commitLoading = true
            let formEl = this.$refs['menuFormRef']
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    let paramDataInfo = {
                        status: '',
                        name: '',
                        cnName: ''
                    }
                    if (this.menuForm.id !== '') {
                        // 修改
                        updateMenuInfo(this.menuForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                })
                                this.$store.commit('closeCenterDialogVisible');
                                menuInfoQuery(paramDataInfo).then(res => {
                                    this.$store.commit('changeMenuDataList', res.data);
                                })
                            } else {
                                ElNotification({
                                    title: 'Error',
                                    message: res.errorCode + ": " +res.message,
                                    type: 'error'
                                })
                            }
                            this.commitLoading = false
                        }).catch(res => {
                            this.commitLoading = false
                        })
                    } else {
                        // 调用后端接口插入数据
                        addMenuInfo(this.menuForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                })
                                this.$store.commit('closeCenterDialogVisible');
                                menuInfoQuery(paramDataInfo).then(res => {
                                    this.$store.commit('changeMenuDataList', res.data);
                                })
                            } else {
                                ElNotification({
                                    title: 'Error',
                                    message: res.errorCode + ": " +res.message,
                                    type: 'error'
                                })
                            }
                            this.commitLoading = false
                        }).catch(res => {
                            this.commitLoading = false
                        })
                    }
                } else {
                    return false
                }
            })
        }
    },
    mounted() {

    },
    created() {
        let param = {
            componentType: "CUSTOM",
            pageInfo: {
                pageIndex: 1,
                pageSize: 10000
            }
        }
        componentInfoQueryNoContent(param).then(res => {
            this.componentList = res.data
        })
        param = {
            pageInfo: {
                pageIndex: 1,
                pageSize: 10000
            }
        }
        routeRootPathInfoQuery(param).then(res => {
            this.routeRootPath = res.data
        })
    }
}
</script>

<style scoped lang="less">
    .formContainer {
        .selectIconsClass {
            width: 20px;
        }
    }
</style>